<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.bootcss.com/flv.js/1.5.0/flv.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<video id="videoElement" style="width:80%; float: left;"></video>
<!-- <br/> -->
<div style="width:20%; float: left;">
    <button id="play">播放</button>
    <button id="pause">暂停</button><br/>
    名字<input type="text" id="name1"/><br/>
    <input type="text" id="it"/>
    <button id="send">发弹幕</button>
    <div id="danmu"></div>
</div>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var url = window.location.href;
        url = url.split('/');
        url[2] = url[2].split(':')[0]+":8000";
        url = url.join('/');
        url = url + "live/STREAM_NAME.flv";
        console.log(url);
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            // url: 'http://localhost:8000/live/STREAM_NAME.flv',
            url,
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        play.onclick = function(){
            flvPlayer.play();
        }
        pause.onclick = function(){
            flvPlayer.pause();
        }
    }
    var wsurl = window.location.href;
    wsurl = wsurl.replace('http', 'ws');
    var ws = new WebSocket(wsurl);
    var danmuid = Number(0);
    ws.onmessage = function (evt) 
    { 
        var received_msg = evt.data;
        var id = danmuid;
        danmuid += 1;
        danmu.innerHTML += '<p id="dm'+id+'">'+received_msg+'</p>';
        const max = 24;
        if(id>=max){
            danmu.removeChild(document.getElementById("dm"+(id-max)));
        }
    };
    send.onclick = function(){
        if(it.value === ''){
            return;
        }
        if(name1.value === ''){
            ws.send(it.value);
        }
        else{
            ws.send(name1.value+':'+it.value);
        }
        it.value = '';
    }
</script>
</body>
</html>